<template>
	<view class="classify">
		<view class="classify-header">
			<ul>
				<li v-for="(item,i) in list" @click="addBtn(i,item)" :class="index==i?'active':''">
					<text>{{item.text}}</text>
				</li>
			</ul>
		</view>
		<view class="classify-baner">
			<view class="line">
				——— <text>{{list[index].text}}</text> ———
			</view>
			<view class="classify-list">
				<ul>
					<li v-for="(item,i) in classifyChild.cates" v-if="classifyChild.cates" @click="addCateId(i,item)">
						<view class="list-con">
							<text>{{item.cateName}}</text>
							<div class="list-img">
								<image :src="classifyImg[i].img" mode=""></image>
							</div>
						</view>
					</li>
				</ul>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getClassify
	} from '@/api/index.js';
	export default {
		data() {
			return {
				index: 0,
				isShow: true,
				
				classifyList: [],
				classifyChild: [],
				// randomnum: 0,
				classifyImg: [{
						img: 'https://img.js.design/assets/img/62da599ff4c6b1fa0642bccd.jpg'
					}, {
						img: 'https://img.js.design/assets/img/62ddf16385b4012d324846ea.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62e0ceef8129292815ce2442.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62ddf16385b4012d324846ea.jpg'
					}, {
						img: 'https://img.js.design/assets/img/62d7a027c346145141eb4c1d.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62d79f3d1ca1a5181e91afc4.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62d7a3bdc346149dfdebfa2a.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62da5abe0d00a03e42f0c774.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62e0d07c812929211ace4d62.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62cf90596be41847bae00736.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62cf90596be41847bae00736.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62ddf16385b4012d324846ea.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62d79f3d1ca1a5181e91afc4.jpg'
					},
					{
						img: 'https://img.js.design/assets/img/62d7a027c346145141eb4c1d.jpg'
					}


				],

				list: [{
						text: '男生小说',
					},
					{
						text: '女生小说',
					},
					{
						text: '图书图库',
					}
				]
			}
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载中...'
			})
			getClassify().then(content => {
					console.log(content);
					this.classifyList = content;
					console.log(this.classifyList);
					this.classifyChild = this.classifyList[0];
					uni.hideLoading()
				})
				.catch(error => {
					console.log(error);
				});
			this.randomNum()
		},
		methods: {
			addBtn(i, item) {
				this.index = i;
				for (let k = 0; k < this.classifyList.length; k++) {
					if (i == 0) {
						this.classifyChild = this.classifyList[0];
					} else if (i == 1) {
						this.classifyChild = this.classifyList[1]
					} else {
						this.classifyChild = this.classifyList[2]
					}
				}
			},
			randomNum() {
				this.randomnum = Math.floor(Math.random() * this.classifyImg.length)
				console.log(this.randomnum);
			},
			addCateId(i,item){
				let data = {
					cateId: item.cateId,
					type: item.cateName,
					channel: this.classifyChild.channel
				};
				// console.log(item);
				uni.navigateTo({
					url: '../filter/filter?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			}
		}

	}
</script>

<style lang="scss">
	.classify {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		opacity: 1;
		overflow: hidden;

		.classify-header {
			width: 90%;
			height: 150rpx;
			opacity: 0.75;
			margin: 40rpx auto 0;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: rgba(190, 145, 97, 1);
			box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1);

			ul {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				list-style: none;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				li {
					width: 150rpx;
					height: 58rpx;
					background-color: #fceccc;
					color: rgba(89, 89, 89, 1);
					border-radius: 15px;
					text-align: center;
					line-height: 58rpx;
					font-size: 14px;
					border: 1px solid #fd6537;

					&.active {
						background-color: #fd6537;
						color: #fceccc;
						transition: all .3s;
						border: 1px solid #fd6537;
					}
				}
			}
		}

		.classify-baner {
			width: 100%;
			background-color: #fceccc;
			overflow: hidden;

			.line {
				width: 500rpx;
				margin: 30rpx auto;
				text-align: center;
				color: rgba(166, 166, 166, 1);

				text {
					color: #000;
					padding: 0 30rpx;
					font-size: 17px;
				}
			}

			.classify-list {
				width: 100%;
				height: 620px;

				ul {
					width: 90%;
					padding: 0;
					margin: 40rpx auto 0;
					list-style: none;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					li {
						width: 328rpx;
						height: 140rpx;
						margin-bottom: 20rpx;
						// background-color: pink;
						background-color: #f0cead;
						border-radius: 8px;

						.list-con {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: space-around;

							text {
								text-align: center;
								width: 80px;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
								font-size: 16.5px;
								font-weight: 600;
								color: rgba(59, 59, 59, 1);
							}

							.list-img {
								width: 70rpx;
								height: 90rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

			}

		}

	}
</style>